<template>
  <div class="panel earthquake-event" v-if="panelControl.earthquakeEvent.show" v-draggable="{dragNodeId:'es-panel'}">
    <div class="title" id="es-panel">地震事件 {{panelControl.earthquakeEvent.id}}<i class="iconfont icon-close icon"
                                                                                @click="panelControl.earthquakeEvent.show=false"></i>
    </div>
    <EarthquakeEvent :id="panelControl.earthquakeEvent.id" :has-border="false"
                     style="width: 100%;height: calc(100% - 40px)"/>
  </div>
  <div class="panel realtime" v-if="panelControl.realtime.show" v-draggable="{dragNodeId:'rd-panel'}">
    <div class="title" id="rd_panel">实时数据 ({{panelControl.realtime.id}})<i class="iconfont icon-close icon"
                                                                           @click="panelControl.realtime.show=false"></i>
    </div>
    <RealtimeData :id="panelControl.realtime.id"/>
  </div>
  <div class="panel feature" v-if="panelControl.features.show" v-draggable="{dragNodeId:'f-panel'}">
    <div class="title" id="f-panel">特征数据 ({{panelControl.features.id}})<i class="iconfont icon-close icon"
                                                                          @click="panelControl.features.show=false"></i>
    </div>
    <FeatureData :id="panelControl.features.id"/>
  </div>
  <div class="panel earthquake-event-scroll-wrap"  ref="scrollListRef">
        <div class="title">
          <i class="iconfont icon-youjiantou"></i>最新地震播报
        </div>
        <vue-seamless-scroll v-if="infoList.length>0" :data="infoList" :class-option="seamlessScrollOption" class="list" @click="handleEarthList">
          <ul>
              <li v-for="(item,idx) in infoList"
                  :key="'q'+idx"
                  class="item">
                  {{ item }}
              </li>
            </ul>
        </vue-seamless-scroll>
  </div>
  <div class="panel earthquake-event-list" v-if="earthListVisible">
    <EarthquakeInfo :needSearchForm="false" :hasPagination="false" style="height: 100%"/>
  </div>
  <div class="panel layer-icon-wrap"  @click="handleLayerVisible">
      <i class="iconfont icon-layers-fill"></i>
  </div>

  <transition name="carHistory">
    <div class="panel layer-check-wrap" v-show="visibleLayer">
        <el-checkbox-group v-model="layerList" @change="changeChcked">
          <el-checkbox :label="0">地震区划图</el-checkbox>
          <el-checkbox :label="1">板块图</el-checkbox>
        </el-checkbox-group>
    </div>

  </transition>


</template>

<script lang="ts" setup>
  import {ref, watch, watchEffect,onMounted,reactive} from 'vue'
  import {siteTree,siteList,onlineStatu} from "@/variable/Site";
  import {panelControl} from "@/variable/PanelControl";
  import {BillboardMarkerLayer, map, PostHighlighter, PrimitiveGroupLayer, PrimitiveType} from "cesium-boost";
  import {Cartesian2, Color, DistanceDisplayCondition, HorizontalOrigin, VerticalOrigin} from "cesium";

  import EarthquakeEvent from '@/views/comps/EarthquakeEvent.vue'
  import RealtimeData from '@/views/map/comps/RealtimeData.vue'
  import FeatureData from '@/views/map/comps/FeatureData.vue'
  import EarthquakeInfo from '@/views/comps/EarthquakeInfo.vue'
  import VueSeamlessScroll from '@/components/VueSeamlessScroll.vue';

  import {getCsnPage} from "@/api/data";
  import dayjs from "dayjs";


  const colorMap = {
    online: Color.fromCssColorString('#1eff80'),
    offline: Color.fromCssColorString('#cdcdcd'),
    warn: Color.fromCssColorString('#ffda1e'),
  }

  let billboardMarkerLayer = new BillboardMarkerLayer({
    billboard: {image: './location.png'},
    popupComponent: 'station',
    enablePopup: true,
    highlighter: new PostHighlighter(),
    fieldMapping: {
      id: 'id',
      longitude: 'lng',
      latitude: 'lat',
      label: 'id'
    },
  });
  let entities = billboardMarkerLayer.entities;
  billboardMarkerLayer.addTo(map)


  let fillColor = Color.fromCssColorString('#45eeff')
  let outlineColor = Color.fromCssColorString('#2d2d2d')
  const addMarker = (data)=>{
    billboardMarkerLayer.addMarker(data, {
        label: {
          text: data.id,
          fillColor: fillColor,
          showBackground: false,
          font: "15px sans-serif",
          outlineWidth: 10,
          outlineColor: outlineColor,
          pixelOffset: new Cartesian2(0, -30),
          horizontalOrigin: HorizontalOrigin.CENTER,
          verticalOrigin: VerticalOrigin.BOTTOM,
          distanceDisplayCondition: new DistanceDisplayCondition(0, 3000000)
        },
        billboard: {
          color: data.online ? colorMap.online : colorMap.offline,
          image: './location.png',
          width: 30,
          height: 30,
          verticalOrigin: VerticalOrigin.BOTTOM
        }
      })
  }
  const addStations = () => {
    let sites = siteTree.value;
    if (sites.length == 0) {
      return
    }
    
    
    // 初始化地图时，新增所有站点
    if(billboardMarkerLayer.entities.size===0){
      for(let i=0,l=siteList.value.length;i<l;i++){
        addMarker(siteList.value[i])
      }
      
    }else{
      let selectItem = null
      let markertList = []
      for (var [key, value] of billboardMarkerLayer.entities.entries()) {
        markertList.push({id:key})
      }
      // 删除站点
      if(billboardMarkerLayer.entities.size>siteList.value.length){  
        selectItem = getDifItem(markertList,siteList.value)
        billboardMarkerLayer.removeMarker(selectItem&&selectItem.length>0&&selectItem[0].id)
        // todo
        // 删除站点
      }else if(billboardMarkerLayer.entities.size<siteList.value.length){                                                                
      // 新增站点
       selectItem = getDifItem(siteList.value,markertList)
       addMarker(selectItem&&selectItem.length>0&&selectItem[0])
      }
    }

    // 修改站点在线状态
    if(billboardMarkerLayer.entities.size>0&&onlineStatu.value.id){
      billboardMarkerLayer.setStyle(onlineStatu.value.id,{color:'#f00'})
      onlineStatu.value = {}
    }
  
  }
  
  // 找出arr1存在的，arr2不存在的元素
  const getDifItem = (arr1,arr2,arr1Key='id',arr2Key='id')=>{
   return arr1.filter(x => !arr2.some(y => y[arr2Key] === x[arr1Key]))
  }
  

  watch(
    ()=>siteList.value,
    (val)=>{
      addStations()
    },
    {
      deep:true
    }
  )


  onMounted(()=>{
    loadData()
    initScroll()
  })

  let earthListVisible = ref(false)
  const handleEarthList =()=>{
    earthListVisible.value = !earthListVisible.value
  }
  let infoList =ref([])
  const loadData = () => {
    getCsnPage(0, 0, 1, 10).then(res => {
      handleInfo(res.data.records)
    })
  }
  const handleInfo = (dataSource)=>{
    infoList.value = dataSource.map(v=>{
      return `${ dayjs(new Date(v.otime)).format('YYYY-MM-DD HH:mm:ss')}${v.locationC}发生${v.m}级地震`
    })
  }

  let visibleLayer = ref(false)
  let layerList = ref([])
  const handleLayerVisible = ()=>{
    visibleLayer.value = !visibleLayer.value
  }
  const changeChcked = (val,a,b)=>{
    console.log(layerList.value)
  }

  const seamlessScrollOption = reactive({
      singleHeight: 30,
      waitTime: 2000,
      limitMoveNum: 12,
  })
 let scrollListRef =ref()
 const initScroll= ()=>{
  if (scrollListRef.value) {
        const r = scrollListRef.value.getBoundingClientRect()
        if (r) {
          seamlessScrollOption.limitMoveNum = parseInt(r.height / seamlessScrollOption.singleHeight) + 1
        }
  }
 }


</script>

<style lang="scss" scoped>
  @import '@/assets/styles/theme';

  .panel {
    position: absolute;
    padding: 0px 5px 5px 5px;
    background: $panel-background;
    border: $panel-border;
    border-image: $panel-border-image;
    z-index: 2;
    color: $panel-color;
    box-shadow: $panel-box-shadow;
    backdrop-filter: $panel-backdrop-filter;

    .title {
      text-align: left;
      font-size: 15px;
      line-height: 35px;
      font-weight: bold;

      .icon {
        float: right;
        margin-right: 5px;
        font-size: 20px;
        cursor: pointer;
      }

      .icon:hover {
        color: #fd8787;
      }
    }
  }

  .earthquake-event {
    right: 10px;
    bottom: 10px;
    width: 35%;
    height: 48%;

    :deep(.el-table) {
      background: none !important;
      --el-table-border-color: rgba(23, 156, 156, 0.6) !important;
    }

    :deep(.el-table tr) {
      background-color: rgba(0, 63, 63, 0) !important;
      color: rgba(54, 215, 215, 1) !important;
    }

    :deep(.data-table-wrap .el-table th.is-leaf) {
      background-color: rgba(6, 175, 175, 0.2) !important;
      color: rgba(54, 215, 215, 1) !important;
      border-bottom: 1px solid rgba(22, 198, 198, 0.6) !important;
    }

    :deep(.el-table td, .el-table th.is-leaf ) {
      border-bottom: 1px solid rgba(23, 156, 156, 0.6) !important;
    }

    :deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
      background-color: rgba(6, 175, 175, 0.2)
    }

    :deep(.el-button--success) {
      background-color: rgba(6, 175, 175, 0.2);
      border-color: rgba(6, 175, 175, 0.6);
    }
  }

  .realtime {
    left: 10px;
    top: 5px;
    width: 35%;
  }

  .feature {
    left: 10px;
    top: 50%;
    width: 35%;
  }

  .earthquake-event-scroll-wrap{
    position: absolute;
    left: 10px;
    bottom: 15px;
    font-size: 14px;
    padding: 0 5px;
    cursor: pointer;
    .panel{
      position: static;
    }
    .list{
      height: 90px;
      text-align: left;
      padding: 0 5px;
      box-sizing: border-box;
      overflow: hidden;
    }
    .item{
      height: 30px;
      line-height: 30px;
    }
  }

  .earthquake-event-list{
    left: 10px;
    bottom: 60px;
    font-size: 14px;
    padding: 6px;
    height: 220px;
    width: 450px;
  }


  .carHistory-enter {
    animation: carHistory-dialog-fade-in 0.8s ease;
  }
  .carHistory-leave {
    animation: carHistory-dialog-fade-out 0.8s ease ;
  }
  .carHistory-enter-active {
    animation: carHistory-dialog-fade-in 0.8s ease;
  }
  .carHistory-leave-active {
    animation: carHistory-dialog-fade-out 0.8s ease ;
  }

  @keyframes carHistory-dialog-fade-in {
    0% {
      transform: translate(100%, 0);
      opacity: 0;
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }
  @keyframes carHistory-dialog-fade-out {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    100% {
      transform: translate(100%,  0);
      opacity: 0;
    }
  }
  .layer-icon-wrap{
    right: 10px;
    bottom: 175px;
    font-size: 14px;
    padding: 6px;
    cursor: pointer;
    i{
      font-size: 20px;
    }
  }
  .layer-check-wrap{
    right: 55px;
    bottom: 175px;
    font-size: 14px;
    padding: 0 10px;
    transition: opacity .8s;

    :deep(.el-checkbox__input.is-checked+.el-checkbox__label){
        color: #21d1e3;
    }
    :deep(.el-checkbox__input.is-checked .el-checkbox__inner){
      background: #21d1e3;
      border-color: #21d1e3;
    }
    :deep(.el-checkbox__label){
      color: #006a6c;
    }
    :deep(.el-checkbox__inner){
      background: transparent;
      border-color: #006a6c;
    }
  }

</style>
